<!-- 容器
    /* 换行规则 */
        flex-wrap: nowrap;             不换行（默认）
        flex-wrap: wrap;               换行
        flex-wrap: wrap-reverse;       换行，下一行反向排列

    /* 单轴 */
    /* 主轴方向 */
        flex-direction: row;                 向右（默认）
        flex-direction: row-reverse;         向左
        flex-direction: column;              向下
        flex-direction: column-reverse;      向上

    /* 主轴对齐方式 */
        justify-content: flex-start;     左对齐（默认）     
        justify-content: flex-end;       右对齐
        justify-content: center;         居中

    /* 主轴空格位置 */
        justify-content: space-between;      空格在内部（内部  间距相等）
        justify-content: space-around;       空格在外围（外围   间距相等）
        justify-content: space-evenly;       空格均匀包围（内部 和 外围 间距相等）

    /* 交叉轴对齐方式 */
        align-items: flex-start;     上对齐
        align-items: flex-end;       下对齐
        align-items: center;         居中
        align-items: baseline;       基线对齐


    /* 多轴 */
        align-content: flex-start;         上对齐
        align-content: flex-end;           下对齐
        align-content: center;             居中
        align-content: space-between;      空格在内部（内部  间距相等）
        align-content: space-around;       空格在外围（外围   间距相等）   
        align-content: space-evenly;       空格均匀包围（内部 和 外围 间距相等）
 -->







<!-- 项目
    /* 排序 */
        order: 数字;                排序       (数字小的先)

    /* 大小缩放 */
        flex-grow: 数字;            自增      （1自增，0不自增，默认不自增）
        flex-shrink: 数字;          压缩      （1压缩，0不压缩，默认压缩）
        flex-basis: 大小;           大小        自定义大小
        flex:  自增  压缩  大小;     三合一简写

    /* 对齐方式 */
        align-self: 对齐方式;       项目对齐方式
-->



















<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: lightgrey;
        }


        .items {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid rebeccapurple;
            display: flex;
            flex-wrap: wrap;

            /* 换行规则 */
            /* flex-wrap: wrap; */
            /* flex-wrap: nowrap; */

            /* 主轴方向 */
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */

            /* 对齐方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */

            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */

            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */

            /* align-content: space-between; */
            /* align-content: space-around; */
            /* align-content: space-evenly; */
        }


        .items .item {
            width: 100px;
            height: 100px;
            border: 1px solid lightblue;
            background-color: pink;
            text-align: center;
            line-height: 100px;
        }


        .items2 {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid orange;
            display: flex;
            /* flex-wrap: wrap; */
        }


        .items2 .item {
            width: 100px;
            height: 100px;
            border: 1px solid lightgreen;
            background-color: pink;
            text-align: center;
            line-height: 100px;

            /* flex: 0 0 20%; */



        }


        .items2 .item1 {
            order: 2;
            /* flex-grow: 1; */
        }

        .items2 .item2 {

            order: 3;
            /* flex-shrink: 1; */

        }

        .items2 .item3 {
            order: 1;
            /* flex-basis: 50%; */
            /* align-self: center; */
        }




        .container {
            width: 1100px;
            margin: 0 auto;
            background-color: rebeccapurple;
        }
        .container .news{
            display: flex;
            border-bottom: 3px solid pink;
        }
        .container .news .left{
            flex-basis: 50%;
        }
        .container .news .right{
            flex: 1 0 30%;
            text-indent: 2em;
            text-align: center;
        }
        .container .news .left img{
            width: 100%;
            padding: 10px;
            border-radius: 10%;
        }
 



    </style>
</head>



<body>

    <div class="items">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
    <br>
    <hr>
    <br>
    <div class="items2">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
    </div>
    <br>
    <hr>
    <br>
    <div class="container">
        <div class="news">
            <div class="left">
                <img src="/素材/img/横图1.png" alt="">
            </div>
            <div class="right">
                <h2>标题1</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi neque veritatis modi optio corporis beatae ex magnam. Laboriosam totam eaque laudantium fuga obcaecati aliquid quos impedit, quidem illum illo esse?</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="news">
            <div class="left">
                <img src="/素材/img/横图2.png" alt="">
            </div>
            <div class="right">
                <h2>标题2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia pariatur magni minus voluptates, atque maiores hic, asperiores debitis, quaerat quis sequi sapiente eius ipsam sunt facere distinctio ipsum ex dolore.</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="news">
            <div class="left">
                <img src="/素材/img/横图3.png" alt="">
            </div>
            <div class="right">
                <h2>标题3</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus ipsam necessitatibus ullam sint neque asperiores quam dignissimos aspernatur repellendus harum error a, molestias beatae vel molestiae, fuga, nemo delectus cum.</p>
            </div>
        </div>
    </div>



</body>

</html>